<template>
  <div>
    <cus-search class="mb_20" title="用户管理">
      <cus-search-item style="justify-content: space-between">
        <Form ref="formValidate" :model="form" :label-width="80">
          <FormItem label="姓名" class="mr_24 mb_20" :label-width="60">
            <Input
              v-model.trim="form.name"
              clearable
              style="width: 200px"
              maxlength="20"
              placeholder="请输入姓名"
            ></Input>
          </FormItem>
          <FormItem label="账号" class="mr_24 mb_20" :label-width="60">
            <Input
              v-model.trim="form.loginName"
              clearable
              style="width: 200px"
              maxlength="20"
              placeholder="请输入账号"
            ></Input>
          </FormItem>
          <FormItem label="联系电话" class="mr_24 mb_20" :label-width="100">
            <Input
              v-model.trim="form.phoneNumber"
              clearable
              style="width: 200px"
              maxlength="20"
              placeholder="请输入联系电话"
            ></Input>
          </FormItem>
        </Form>
        <div style="display: flex">
          <Button
            class="mr_10 mb_20"
            type="primary"
            v-permission="10"
            @click="
              () => {
                this.pages.page = 1;
                this.onInit();
              }
            "
            >查询</Button
          >
          <Button
            class="mr_10 mb_20"
            type="default"
            v-permission="10"
            @click="
              () => {
                this.onReset();
              }
            "
            >重置</Button
          >
        </div>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
    <cus-card :showTitle="false" class="mt_20" style="padding: 20px 20px">
      <Button
        class="mr_10 mb_20"
        type="primary"
        v-permission="20"
        style="margin-left: auto; display: block"
        @click="
          () => {
            this.pages.page = 1;
            this.onEdit();
          }
        "
        >添加</Button
      >
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="formData"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
        :row-class-name="rowClassName"
      >
        <template slot-scope="{ row, index }" slot="gmtCreate">
          {{ row.gmtCreate | formatTime("yyyy-MM-dd hh-mm-ss") }}
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex" style="justify-content: space-around">
            <Button
              type="primary"
              size="small"
              v-permission="30"
              @click="onEdit(row)"
              style="margin-right: 6px"
            >
              编辑
            </Button>
            <Button
              type="primary"
              v-if="row.status == 2"
              size="small"
              style="margin-right: 6px"
            >
              已交接
            </Button>

            <Button
              type="primary"
              v-else
              size="small"
              v-permission="40"
              @click="onHandle(row)"
              style="margin-right: 6px"
            >
              {{ row.isAdmin == 1 ? "交接" : "重置密码" }}
            </Button>
            <Button
              :type="row.status ? 'error' : 'success'"
              v-if="row.isAdmin != 1"
              size="small"
              v-permission="50"
              @click="onDelete(row)"
            >
              {{ row.status == 0 ? "启用" : "禁用" }}
            </Button>
          </div>
        </template>
      </cusTable>
      <div style="width: 100%; display: flex; justify-content: flex-end">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getUserListApi"
        ></cus-page>
      </div>
    </cus-card>
  </div>
    <userModal ref="userModal"></userModal>
    <handleModal ref="handleModal"></handleModal>
  </div>
</template>
<script>
import {
  getUserList,
  modifyUserStatus,
  resetUserPassword,
} from "@/api/organ/system";
import userModal from "./components/userModal";
import handleModal from "./components/handleModal.vue";
export default {
  components: { userModal, handleModal },
  name: "userManage",
  data() {
    return {
      mode: 1,
      modal: false,
      form: {
        loading: false,
        name: "", // 用户名
        loginName: "", //账号
        phoneNumber: "", //手机号
      },
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      tableHeight: 0,//表格高度
      formData: [],
      columns: [
        {
          title: "序号",
          width: 70,
          key: "name",
          type: "index",
          align: "center",
        },
        {
          title: "账号",
          Width: 120,
          key: "loginName",
          align: "center",
        },
        {
          title: "姓名",
          Width: 120,
          key: "name",
          align: "center",
        },
        {
          title: "单位",
          Width: 120,
          key: "unitName",
          align: "center",
        },
        {
          title: "职务",
          width: 120,
          key: "postName",
          align: "center",
        },
        {
          title: "角色",
          width: 120,

          key: "roleNames",
          align: "center",
        },
        {
          title: "联系电话",
          width: 130,
          key: "phoneNumber",
          align: "center",
        },
        {
          title: "创建时间",
          minwidth: 120,

          slot: "gmtCreate",
          align: "center",
        },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getUserListApi();
      setTimeout(() => {
      this.tableHeight = window.innerHeight - 373; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    },
    // 表格高度变化
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 410; // 表格自适应高度
       
      }, 100);
    },
    // 重置
    onReset() {
      this.form.name = ''
      this.form.loginName = ''
      this.form.phoneNumber = ''
      this.pages.page = 1;
      this.onInit();
    },
    // 交接或重置密码
    onHandle(row) {
      this.$refs["handleModal"].form.id = row.id;
      this.$refs["handleModal"].isAdmin = row.isAdmin;
      this.$refs["handleModal"].show();
    },
    // 判断禁用用户行的颜色
    rowClassName(row,index) {
       if (row.status === 0) {
      	return 'table-select-row'
  } 
    },  
    // 禁用
    onDelete(row) {
      let contentA = row.status == 0 ? "确认启用当前账号" : "确认禁用当前账号";
      this.$cu
        .dialog({
          content: contentA,
        })
        .then(() => {
          row.status = row.status == 1 ? 0 : 1;
          this.getModifyUserStatus(row);
        });
    },
    // 添加用户
    onEdit(row) {
      console.log(row);
      if (row) {
        console.log(row.id);
        this.$refs["userModal"].form.id = row.id;
      } 
      this.$refs["userModal"].show(); 
    },
    // 重置用户密码
    getResetUserPassword(row) {
      this.form.loading = true;
      return new Promise((resolve) => {
        resetUserPassword({
          status: row.status,
          userId: row.id,
        }).then((res) => {
          if (res.code === 1) {
            this.form.loading = false;
            resolve();
          }
        });
      });
    },
    // 改变用户状态
    getModifyUserStatus(row) {
      this.form.loading = true;
      return new Promise((resolve) => {
        modifyUserStatus({
          status: row.status,
          userId: row.id,
        }).then((res) => {
          if (res.code === 1) {
            this.form.loading = false;
            this.onInit()
            resolve();
          }
        });
      });
    },
    // 获取用户列表
    getUserListApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        getUserList({
          unitCode: this.vuex_user.base.unitCode,
          name: this.form.name,
          loginName: this.form.loginName,
          phoneNumber: this.form.phoneNumber,
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
        }).then((res) => {
          if (res.code === 1) {
            this.pages.pageTotal = res.data.total;
            this.formData = res.data.list;
            this.form.loading = false;
            resolve();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.button-box {
  float: right;
}
::v-deep .table-select-row td {
  background-color: #f6f6f6 !important;
}
</style>
